<template>
    <scroll-view scroll-y :style="{ height: height }">
        <view class="customer-detail-info">
            <view class="info-group">
                <view class="info-group-title" @click="infoedit">
                    <text class="title-text">基本信息</text>
                    <view class="titele-edit"><image src="/static/img/edit.png"></image>编辑</view>
                </view>
                <view class="info-item">
                    <easy-label-value label="客户等级:" :value="userData.DealerGradeName"></easy-label-value>
                    <easy-label-value
                        label="所属部门:"
                        :value="`${userData.FrameworkName ? userData.FrameworkName + '-' : ''}${
                            userData.DisName ? userData.DisName : ''
                        }`"></easy-label-value>
                    <easy-label-value label="所属业务员:" :value="userData.WorkerName"></easy-label-value>
                    <easy-label-value label="推荐人:" :value="userData.InvitNickName"></easy-label-value>
                    <easy-label-value label="客户标签:" :value="userData.StoreTagNames"></easy-label-value>
                    <!-- <easy-label-value label="结算方式:" value="--"></easy-label-value> -->
                    <!-- <easy-label-value label="默认仓库:" :value="`${userData.WarehouseName?userData.WarehouseName:''}`"></easy-label-value> -->
                    <easy-label-value
                        label="所在区:"
                        :value="`${userData.ProvinceName ? userData.ProvinceName : ''}${
                            userData.CityName ? userData.CityName : ''
                        }${userData.AreaName ? userData.AreaName : ''}${
                            userData.StreetName ? userData.StreetName : ''
                        }`"></easy-label-value>
                    <easy-label-value label="详情地址:" :value="userData.ContactAddress"></easy-label-value>
                    <!-- <easy-label-value label="邮编:" value="--"></easy-label-value> -->
                    <!-- <easy-label-value label="账号状态:" value="--"></easy-label-value> -->
                    <easy-label-value label="订货账号:" :value="getAccountValue(userData)"></easy-label-value>
                </view>
            </view>
            <view class="info-group mtb24">
                <view class="info-group-title">
                    <text class="title-text">联系人信息</text>
                </view>
                <view class="info-item">
                    <easy-label-value label="姓名:" :value="userData.RealName"></easy-label-value>
                    <!-- <easy-label-value label="职位:" value="--"></easy-label-value> -->
                    <easy-label-value label="手机号:" :value="userData.ContactTel"></easy-label-value>
                    <easy-label-value label="邮箱:" :value="userData.Email"></easy-label-value>
                </view>
            </view>
            <!-- 			<view class="info-group">
				<view class="info-group-title">
					<text class="title-text">财务信息</text>
				</view>
				<view class="info-item">
					<easy-label-value label="发票抬头:" value="--"></easy-label-value>
					<easy-label-value label="纳税人识别号:" value="--"></easy-label-value>
					<easy-label-value label="地址:" value="--"></easy-label-value>
					<easy-label-value label="财务电话:" value="--"></easy-label-value>
					<easy-label-value label="开户银行:" value="--"></easy-label-value>
					<easy-label-value label="银行账号:" value="--"></easy-label-value>
					<easy-label-value label="收款账号:" value="--"></easy-label-value>
				</view>
			</view>
			<view class="info-group">
				<view class="info-group-title">
					<text class="title-text">附加信息</text>
				</view>
				<view class="info-item">
					<easy-label-value label="客户编码:" value="--"></easy-label-value>
					<easy-label-value label="签约时间:" value="--"></easy-label-value>
				</view>
			</view> -->
            <view class="info-group">
                <view class="info-group-title" @click="goEdit">
                    <text class="title-text">收货地址</text>
                    <view class="title-action">
                        <view class="titele-edit"><image src="/static/img/edit.png"></image>编辑</view>
                        <!-- <text>编辑</text> -->
                    </view>
                </view>
                <view class="info-item" v-if="false">
                    <easy-label-value
                        label="姓名电话:"
                        :value="userData.RealName + ',' + userData.ContactTel"></easy-label-value>
                    <easy-label-value
                        label="收货地址:"
                        :value="`${userData.ProvinceName ? userData.ProvinceName : ''}${
                            userData.CityName ? userData.CityName : ''
                        }${userData.AreaName ? userData.AreaName : ''}${
                            userData.StreetName ? userData.StreetName : ''
                        }${userData.ContactAddress ? userData.ContactAddress : ''}`"></easy-label-value>
                </view>
            </view>
            <view class="info-group">
                <view class="info-group-title">
                    <text class="title-text">发货仓库</text>
                </view>
                <view class="info-item">
                    <view><text class="defalut-icon">默认</text>{{ warehouse }}</view>
                </view>
            </view>
        </view>
    </scroll-view>
</template>

<script>
import { GetUserDefaultWarehouse } from "@/service/api/warehouse.js"
import easyLabelValue from "@/components/easy/easy-label-value.vue"
export default {
    components: {
        easyLabelValue,
    },
    props: {
        height: {
            type: String,
            default: "200px",
        },
        StoreId: {
            type: String,
            default: 0,
        },
        StoreUserId: {
            type: String,
            default: 0,
        },
        userData: {
            type: Object,
            default: () => {},
        },
    },
    data() {
        return {
            warehouse: "",
        }
    },
    mounted() {
        this.GetUserDefaultWarehouse()
    },
    methods: {
        //进入编辑地址
        goEdit() {
            this.easyGoTo(`/pages/address/index?storeUserId=${this.StoreUserId}`)
        },
        infoedit() {
            this.easyGoTo(`/pages/customer/add?StoreId=${this.StoreId}&StoreUserId=${this.StoreUserId}`)
        },
        getAccountValue(userData) {
            return `${userData.UserName} (${userData.StatusName})`
        },
        GetUserDefaultWarehouse() {
            let path = "?userId=" + this.StoreUserId
            GetUserDefaultWarehouse(path).then((res) => {
                if (res.State == 1) {
                    this.warehouse = res.Data.WarehouseName
                }
            })
        },
    },
}
</script>

<style lang="scss">
.customer-detail-info {
    margin: 0 $app-page-padding;
    background: $color-white;
    .mtb24 {
    }
    .info-group {
        border-bottom: solid 1rpx #f0f0f0;
        padding: $app-page-padding;
        &:last-child {
            border-bottom: none;
        }
        .info-item {
            margin-top: 24rpx;
        }
        .info-group-title {
            display: flex;
            flex-direction: row;
            justify-content: space-between;
            align-items: center;
            .title-text {
                font-size: $font-size-28;
                font-weight: 700;
                flex: 1;
                color: $color-gray-1;
            }
            .titele-edit {
                display: flex;
                align-items: center;
                justify-content: flex-start;
                font-size: 24rpx;
                color: #4070ff;
                image {
                    width: 32rpx;
                    height: 32rpx;
                    margin-right: 6rpx;
                }
            }
            .title-action {
                display: flex;
                flex-direction: row;
                align-items: center;
            }
        }
    }
}
.defalut-icon {
    background: $app-color-main;
    color: $color-white;
    padding: 5rpx 14rpx;
    font-size: $font-size-20;
    margin-right: 20rpx;
    width: 48rpx;
    height: 28rpx;
    border-radius: 8rpx;
}
</style>
